//分享官管理
import React from 'react'
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Tabs, Modal, message, Tooltip, Space } from "antd";
import TheTable from '@/components/TheTable'
import ThePagination from '@/components/ThePagination'
import TheButton from '@/components/TheButton'
import RejectModal from './components/rejectModal'
import TheQueryForm from '@/components/TheQueryForm';
import ActivePopulationModal from './components/activePopulationModal'
import PetLoverModal from './components/petLoverModal'
import OrderNumModal from './components/orderNumModal'
import { getAreaTree } from '@/request/distribution/orderCommission.js'
import store from "@/store/store"
import Json2Excel from '@/utils/Json2Excel'
import _ from 'lodash'
import { sharerList, sharerExamine, apiNewSharerList, sharedListExport } from '@/request/distribution/sharerManagement.js'
import moment from 'moment';
import { getDateTime3 } from "@/utils/getDate";
export default class SharerManagement extends React.Component {
  constructor(props) {
    super(props)
    this.queryFormRef = React.createRef()
    this.state = {
      tabValue: '0',//Tab值
      tabValueData: [], //Tab内容
      searchOption: [
        { field: 'memberInfoLike', label: '会员信息', placeholder: '输入会员ID/会员昵称/会员手机号', type: 'Input', defaultValue: '' },
        {
          field: 'sharedLevel', label: '身份类型', placeholder: '请选择身份类型 ', type: 'Select',
          options: [{ label: '全部', value: '' }, { label: '初级分享官', value: '0' }, { label: '高级分享官', value: '1' },],
          initialValues: ''
        },
        { field: 'address', label: '地址', placeholder: '省市区', required: false, rules: [], changeOnSelect: true, type: 'Cascader', defaultValue: '', option: [], },
        {
          field: 'status', label: '状态', placeholder: '请选择分享官状态 ', type: 'Select',
          options: [{ label: '待审核', value: '0' }, { label: '通过', value: '1' }, { label: '驳回', value: '2' }, { label: '拉黑', value: '3' },]
        },
        { field: 'time', label: '时间段统计', type: 'RangePicker', required: false, rules: [], defaultValue: " " },
      ],
      queryForm: {},
      columns: [
        {
          title: "用户ID",
          dataIndex: "memberId",
          key: "memberId",
        },
        {
          title: "用户昵称",
          dataIndex: "nickName",
          key: "nickName",
          render: (text) => {
            return text ? text : "-"
          }
        },
        {
          title: "实名姓名",
          dataIndex: "realName",
          key: "realName",
          render: (text) => {
            let str = ''
            if (text) {
              if (text.length === 2) {
                str = text.substr(0, 1) + '*';
              } else if (text.length > 2) {
                let char = '';
                for (let i = 0, len = text.length - 2; i < len; i++) {
                  char += '*';
                }
                str = text.substr(0, 1) + char + text.substr(-1, 1);
              } else {
                str = text;
              }
            } else {
              str = '未实名'
            }
            return str
          }
        },
        {
          title: "会员手机号",
          dataIndex: "memberMobile",
          key: "memberMobile",
          render: (text) => {
            return text ? text : '-'
          }
        },
        {
          title: "联系方式",
          dataIndex: "memberPhone",
          key: "memberPhone",
          render: (text) => {
            return text ? text : '-'
          }
        },
        {
          title: "身份类型",
          dataIndex: "sharedLevel",
          key: "sharedLevel",
          render: (text) => {
            let label = "-"
            switch (parseInt(text)) {
              case 0:
                label = "初级分享官"
                break;
              case 1:
                label = "高级分享官"
                break;
              default:
                label = "-";
            }
            return label
          }
        },
        {
          title: "时间",
          render: (_, record) => {
            return record.sharedLevel === '1' ? <Space direction='vertical'>
              {record.createTime && <span>申请时间：{record.createTime}</span>}
              {record.status !== 0 && record.examineTime && <span>{record.status === 2 ? "驳回时间" : "通过时间"}：{record.examineTime}</span>}
              {record.status === 3 && record.blackTime && <span>拉黑时间：{record.blackTime}</span>}
            </Space> : '-'
          }
        },
        {
          title: "地址",
          render: (_, record) => {
            return record.sharedLevel === '1' ? <Tooltip title={record.province + record.city + record.district + record.address}>
              <span style={{ width: 300, display: 'flex', flexWrap: 'wrap', whiteSpace: 'pre-wrap', wordBreak: 'break-all', justifyContent: 'center' }}>{record.province + record.city + record.district + record.address}</span>
            </Tooltip> : '-'
          }
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          render: (text, record) => {
            let status = ''
            switch (parseInt(text)) {
              case 0:
                status = '待审核'
                break
              case 1:
                status = '正常'
                break
              case 2:
                status = '驳回'
                break
              case 3:
                status = '拉黑'
                break
              default:
                status = '-'
            }
            return record.sharedLevel === '1' ? status : '-'
          }
        },
        {
          title: "商品分享次数",
          width: 150,
          dataIndex: "goodsShareTotalCount",
          key: "goodsShareTotalCount",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => { return <span>统计时间段，分享官将商品分享给其他用户的次数。</span> }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
          render: (_, record) => {
            return <Space direction='vertical'>
              <span>合计:{record.shareInfoDTO.goodsShareTotalCount ?? "-"}</span>
              <span>微信好友:{record.shareInfoDTO.goodsShareFriendCount ?? "-"}</span>
              <span>朋友圈:{record.shareInfoDTO.goodsShareCircleCount ?? "-"}</span>
              <span>下载图片:{record.shareInfoDTO.goodsShareImgCount ?? "-"}</span>
            </Space>
          }
        },
        {
          title: "商品分享注册人数",
          width: 200,
          dataIndex: "goodsShareInviteMemberCount",
          key: "goodsShareInviteMemberCount",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => { return <span>统计时间段，分享官将商品分享给其他用户 ，产生的新用户注册数。</span> }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
          render: (_, record) => {
            return record.shareInfoDTO.goodsShareInviteMemberCount ?? "-"
          }
        },
        {
          title: "商品分享下单人数",
          width: 200,
          dataIndex: "goodsShareCreateOrderCount",
          key: "goodsShareCreateOrderCount",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => { return <span>爱宠成员用户通过分享官分享的商品完成整个购买流程 （统计时间范围内一个用户多次下单，只计算一人。）</span> }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
          render: (_, record) => {
            return record.shareInfoDTO.goodsShareCreateOrderCount ?? "-"
          }
        },
        {
          title: "活动分享次数",
          width: 150,
          dataIndex: "activityShareTotalCount",
          key: "activityShareTotalCount",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => { return <span>统计时间段，分享官将拉新活动分享给其他用户的次数。</span> }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
          render: (_, record) => {
            return (
              <Space direction='vertical'>
                <span>合计:{record.shareInfoDTO.activityShareTotalCount ?? "-"}</span>
                <span>微信好友:{record.shareInfoDTO.activityShareFriendCount ?? "-"}</span>
                <span>朋友圈:{record.shareInfoDTO.activityShareCircleCount ?? "-"}</span>
              </Space>
            )
          }
        },
        {
          title: "活动分享注册人数",
          width: 200,
          dataIndex: "activityShareInviteMemberCount",
          key: "activityShareInviteMemberCount",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => { return <span>通过分享官分享的活动 产生的新用户注册数。</span> }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
          render: (_, record) => {
            return record.shareInfoDTO.activityShareInviteMemberCount ?? "-"
          }
        },
        {
          title: "爱宠成员数",
          width: 150,
          dataIndex: "petLovingMemberCount",
          key: "petLovingMemberCount",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => { return <span>统计时间段,加入的爱宠成员统计数量</span> }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
          render: (text, record) => {
            return <Space direction='vertical'>
              {text ?? "-"}
              {<TheButton haspermi={['distribution:sharerManagement:petLoverModal']} onClick={() => { this.petLoverModalRef.openModal(record.sharedById, this.state.queryForm) }}>查看</TheButton>}
            </Space>
          }
        },
        {
          title: "累积下单人数",
          width: 150,
          dataIndex: "shareOrderTotalMemberCount",
          key: "shareOrderTotalMemberCount",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => { return <span>每天订单支付成功的会员数去重，并按照统计天数增加所得</span> }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
          render: (text, record) => {
            return <Space direction='vertical'>
              {record.shareOrderDTO.shareOrderTotalMemberCount ?? "-"}
              {<TheButton haspermi={['distribution:sharerManagement:orderNumModal']} onClick={() => { this.orderNumModalRef.openModal(record.sharedById, this.state.queryForm) }}>查看</TheButton>}
            </Space>
          }
        },
        {
          title: "当天下单人数",
          width: 150,
          dataIndex: "shareOrderTodayMemberCount",
          key: "shareOrderTodayMemberCount",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => { return <span>当天，成功支付订单的人数 （统计时间范围内一个用户多次下单，只计算一人）</span> }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
          render: (_, record) => {
            return record.shareOrderDTO.shareOrderTodayMemberCount ?? "-"
          }
        },
        {
          title: "当天退单人数",
          width: 150,
          dataIndex: "shareOrderTodayToRefundMemberCount",
          key: "shareOrderTodayToRefundMemberCount",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => { return <span>当天，成功支付订单的人数中，发起退单人数 （不统计退单结果）</span> }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
          render: (_, record) => {
            return record.shareOrderDTO.shareOrderTodayToRefundMemberCount ?? "-"
          }
        },
        {
          title: "订单数",
          dataIndex: "shareOrderCount",
          key: "shareOrderCount",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => { return <span>统计时间内，成功支付订单的数量</span> }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
          render: (_, record) => {
            return record.shareOrderDTO.shareOrderCount ?? "-"
          }
        },
        {
          title: "退单数",
          dataIndex: "shareOrderRefundCount",
          key: "shareOrderRefundCount",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => { return <span>统计时间内，成功支付订单对应的退单数量</span> }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
          render: (_, record) => {
            return record.shareOrderDTO.shareOrderRefundCount ?? "-"
          }
        },
        {
          title: "活跃人数",
          dataIndex: "activeMember",
          key: "activeMember",
          filterDropdown: true,
          filterIcon: () => {
            return (
              <Tooltip zIndex={999} placement="top" title={() => { return <span>统在统计时间内与在哈奇马平台（APP/小程序）进行过至少一次互动的独立用户数量。</span> }}  >
                <QuestionCircleOutlined />
              </Tooltip>
            );
          },
          render: (text, record) => {
            return <Space direction='vertical'>
              {record.shareOrderDTO.activeMember ?? "-"}
              {<TheButton haspermi={['distribution:sharerManagement:activeMemberModal']} onClick={() => { this.activePopulationModalRef.openModal(record.sharedById, this.state.queryForm) }}>查看</TheButton>}
            </Space>
          }
        },
        {
          title: "操作",
          fixed: 'right',
          render: (_, record) => {
            return (
              <TheButton haspermi={['distribution:sharerManagement:view']} onClick={() => { this.props.history.push('/distribution/sharerManagement/details/' + record.sharedById + "/" + record.memberId) }}>查看</TheButton>
            )
          }
        },
      ],
      dataSource: [],
      dataSource1: [],
      pageData: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      auditColumns: [
        {
          title: "用户ID",
          dataIndex: "memberId",
          key: "memberId",
        },
        {
          title: "用户昵称",
          dataIndex: "username",
          key: "username",
        },
        {
          title: "会员手机号",
          dataIndex: "memberMobile",
          key: "memberMobile",
          render: (text) => {
            var reg = /^(\d{3})\d{4}(\d{4})$/;
            if (text) {
              var memberMobile = text.toString().replace(reg, '$1****$2');
              return memberMobile;
            }
          }
        },
        {
          title: "联系方式",
          dataIndex: "memberPhone",
          key: "memberPhone",
          render: (text) => {
            var reg = /^(\d{3})\d{4}(\d{4})$/;
            if (text) {
              var memberMobile = text.toString().replace(reg, '$1****$2');
              return memberMobile;
            }
          }
        },
        {
          title: "最近一次操作时间",
          dataIndex: "createTime",
          key: "createTime",
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          render: (text, record) => {
            let status = ''
            switch (parseInt(text)) {
              case 0:
                status = '待审核'
                break
              case 1:
                status = '审核通过'
                break
              case 2:
                status = `被驳回(${record.rejectMessage})`
                break
              case 3:
                status = `拉黑`
                break
              default:
                status = '-'
            }
            return <Tooltip title={status}>
              <span style={{ width: 200, display: 'block', margin: 'auto', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: "ellipsis" }}>{status}</span>
            </Tooltip>
          }
        },
        {
          title: "操作",
          fixed: 'right',
          render: (_, record) => {
            return (
              <div>
                <TheButton haspermi={['distribution:sharerManagement:view']} onClick={() => { this.props.history.push(`/distribution/sharerManagement/details/${record.sharedById}/${record.memberId}`) }}>查看</TheButton>
                {
                  record.status === 0 && <span>
                    <TheButton haspermi={['distribution:sharerManagement:pass']} onClick={() => { this.passSharer(record.sharedById) }}>通过</TheButton>
                    <TheButton haspermi={['distribution:sharerManagement:reject']} onClick={() => { this.rejectModalRef.openRejectModal(record.sharedById) }} >驳回</TheButton>
                  </span>
                }
              </div>
            )
          }
        },
      ],
      exportBtnLoading: false,
    }
  }
  componentDidMount() {
    let searchParams = store.getState().searchValue
    let { pageNo, pageSize, queryForm, type, pathName } = searchParams
    if (searchParams && pageNo && pathName == 'sharerManagement') {
      this.setState({
        queryForm, pageData: { pageNo, pageSize }, tabValue: type
      }, () => {
        this.queryFormRef.formRef.setFieldsValue({ ...queryForm, time:queryForm.startTime ? [moment(queryForm.startTime), moment(queryForm.endTime)] : [] })
        this.getData({ ...queryForm })
      })
    } else {
      this.getData()
    }
    this.getAreaTreeList()
  }
  //省市区
  getAreaTreeList = async () => {
    let { searchOption } = this.state
    let res = await getAreaTree()
    if (res.code === 0) {
      let arr = res.data.map(item => {
        return {
          label: item.label,
          value: item.label,
          children: item.children.map(city => {
            return {
              label: city.label,
              value: city.label,
              children: city.children.map(dis => {
                return {
                  label: dis.label,
                  value: dis.label
                }
              })
            }
          })
        }
      })
      searchOption[2].option = arr
    }
    this.setState({ searchOption })
  }
  //分享官列表数据处理
  getData = (values) => {
    let { pageData, tabValue } = this.state
    if (values && values.hasOwnProperty('address')) {
      values.province = values.address[0]
      values.city = values.address[1]
      values.district = values.address[2]
      delete (values.address)
    }
    if (values && values.hasOwnProperty('time') && values.time.length > 0) {
      values.startTime = getDateTime3(values.time[0]) + " 00:00:00"
      values.endTime = getDateTime3(values.time[1]) + " 23:59:59"
      delete (values.time)
    }else if (values && values.hasOwnProperty('time') ) {
      delete (values.time)
    }
    this.setState({
      queryForm: values === undefined ? this.state.queryForm : { ...values }
    }, async () => {
      let params = { ...pageData, queryForm: this.state.queryForm, type: tabValue }
      store.dispatch({
        type: 'SaveSearchValues',
        data: { pathName: 'sharerManagement', ...params }
      })
      if (tabValue === "0") {
        await apiNewSharerList({ param: { ...pageData, }, ...values, }).then((res) => {
          if (res.code === 0) {
            this.setState({
              dataSource: res.data,
              pageData: {
                pageNo: res.pageNo,
                pageSize: res.pageSize
              },
              total: res.totalCount,
            })
          }
        })
      } else {
        await sharerList({ ...pageData, ...values, type: tabValue }).then((res) => {
          if (res.code === 0) {
            this.setState({
              dataSource1: res.data,
              pageData: {
                pageNo: res.pageNo,
                pageSize: res.pageSize
              },
              total: res.totalCount,
            })
          }
        })
      }
    })
  }
  //tab切换
  tabChange = (e) => {
    this.setState({
      tabValue: e
    }, () => {
      this.pageChange(1, 10)
    })
  }
  //分页
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo, pageSize
      }
    }, () => {
      this.getData(this.state.queryForm)
    })
  }
  //搜索
  onFormSearch(values) {
    this.setState({
      pageData: { pageNo: 1, pageSize: 10 }
    }, () => {
      this.getData(values)
    })
  }
  //搜索重置
  onReset() {
    this.setState({ queryForm: {} }, () => {
      this.pageChange(1, 10)
    })
  }
  // 通过申请
  passSharer = (sharedById) => {
    Modal.confirm({
      title: '通过审核',
      content: '通过后，该用户将成为高级分享官',
      onOk: async () => {
        await sharerExamine({ sharedById, status: 1 }).then(res => {
          if (res.code === 0) {
            message.success('审核通过!')
            this.getData()
          }
        })
      }
    });
  }
  // 导出
  toExport = () => {
    this.setState({ exportBtnLoading: true }, async () => {
      let tB_data = []
      let res = await sharedListExport({ ...this.state.queryForm, param: { ...this.state.pageData } })
      if (res.code === 0) {
        tB_data = res.data.map(item => {
          let realName = '', sharedLevel = '', status = '', shareInfoDTO = null, shareOrderDTO = null
          // 实名姓名加密处理
          if (item.realName) {
            if (item.realName.length === 2) {
              realName = item.realName.substr(0, 1) + '*';
            } else if (item.realName.length > 2) {
              let char = '';
              for (let i = 0, len = item.realName.length - 2; i < len; i++) {
                char += '*';
              }
              realName = item.realName.substr(0, 1) + char + item.realName.substr(-1, 1);
            } else {
              realName = item.realName
            }
          } else {
            realName = '-'
          }
          //身份类型
          switch (parseInt(item.sharedLevel)) {
            case 0:
              sharedLevel = "初级分享官"
              break;
            case 1:
              sharedLevel = "高级分享官"
              break;
            default:
              sharedLevel = "-";
          }
          //状态
          switch (parseInt(item.status)) {
            case 0:
              status = '待审核'
              break
            case 1:
              status = '正常'
              break
            case 2:
              status = '驳回'
              break
            case 3:
              status = '拉黑'
              break
            default:
              status = '-'
          }
          // 分享次数信息
          shareInfoDTO = item.shareInfoDTO ?? null
          // 分享订单信息
          shareOrderDTO = item.shareOrderDTO ?? null
          // 商品分享次数
          return {
            memberId: item.memberId ?? '-', // 用户ID
            memberName: item.memberName ?? '-', // 用户昵称
            realName, // 实名姓名
            memberMobile: item.memberMobile ?? '-', // 会员手机号
            memberPhone: item.memberPhone ?? '-', // 联系方式
            sharedLevel, // 身份类型
            createTime: item.sharedLevel === '1' ? item.createTime ?? '-' : '-', // 申请时间
            examineTime: item.sharedLevel === '1' ? item.examineTime ?? '-' : '-', // 通过时间
            blackTime: item.sharedLevel === '1' ? item.blackTime ?? '-' : '-', // 拉黑时间
            address: item.sharedLevel === '1' ? item.address ?? '-' : '-', // 地址
            status: item.sharedLevel === '1' ? status : '-',//审核状态
            goodsShareFriendCount: shareInfoDTO ? shareInfoDTO.goodsShareFriendCount ?? '-' : '-',// 商品分享次数微信好友
            goodsShareCircleCount: shareInfoDTO ? shareInfoDTO.goodsShareCircleCount ?? '-' : '-',// 商品分享次数-朋友圈
            goodsShareImgCount: shareInfoDTO ? shareInfoDTO.goodsShareImgCount ?? '-' : '-',// 商品分享次数-下载图片
            goodsShareTotalCount: shareInfoDTO ? shareInfoDTO.goodsShareTotalCount ?? '-' : '-',// 商品分享次数-合计
            goodsShareInviteMemberCount: shareInfoDTO ? shareInfoDTO.goodsShareInviteMemberCount ?? '-' : '-',// 商品分享注册人数
            goodsShareCreateOrderCount: shareInfoDTO ? shareInfoDTO.goodsShareCreateOrderCount ?? '-' : '-',// 商品分享下单人数
            activityShareFriendCount: shareInfoDTO ? shareInfoDTO.activityShareFriendCount ?? '-' : '-',// 活动分享次数-微信好友
            activityShareCircleCount: shareInfoDTO ? shareInfoDTO.activityShareCircleCount ?? '-' : '-',// 活动分享次数-朋友圈
            activityShareTotalCount: shareInfoDTO ? shareInfoDTO.activityShareTotalCount ?? '-' : '-',// 活动分享次数-合计
            activityShareInviteMemberCount: shareInfoDTO ? shareInfoDTO.activityShareInviteMemberCount ?? '-' : '-',// 活动分享注册人数
            petLovingMemberCount: item.petLovingMemberCount ?? '-',//爱宠成员数
            shareOrderTotalMemberCount: shareOrderDTO ? shareOrderDTO.shareOrderTotalMemberCount ?? '-' : '-',// 累积下单人数
            shareOrderTodayMemberCount: shareOrderDTO ? shareOrderDTO.shareOrderTodayMemberCount ?? '-' : '-',// 当天下单人数
            shareOrderTodayToRefundMemberCount: shareOrderDTO ? shareOrderDTO.shareOrderTodayToRefundMemberCount ?? '-' : '-',// 当天退单人数
            shareOrderCount: shareOrderDTO ? shareOrderDTO.shareOrderCount ?? '-' : '-',// 订单数
            shareOrderRefundCount: shareOrderDTO ? shareOrderDTO.shareOrderRefundCount ?? '-' : '-',// 退单数
            activeMember: shareOrderDTO ? shareOrderDTO.activeMember ?? '-' : '-',// 活跃人数
          }
        })
        const option = {
          header: [
            { prop: 'memberId', title: '用户ID' },
            { prop: 'memberName', title: '用户昵称' },
            { prop: 'realName', title: '实名姓名' },
            { prop: 'memberMobile', title: '会员手机号' },
            { prop: 'memberPhone', title: '联系方式' },
            { prop: 'sharedLevel', title: '身份类型' },
            {
              prop: '', title: '时间',
              children: [
                { prop: 'createTime', title: '申请时间', width: 25 },
                { prop: 'examineTime', title: '通过时间', width: 25 },
                { prop: 'blackTime', title: '拉黑时间', width: 25 },
              ]
            },
            { prop: 'address', title: '地址', width: 25 },
            { prop: 'status', title: '状态', },
            {
              prop: '', title: '商品分享次数',
              children: [
                { prop: 'goodsShareFriendCount', title: '微信好友', valueType: 'n' },
                { prop: 'goodsShareCircleCount', title: '朋友圈', valueType: 'n' },
                { prop: 'goodsShareImgCount', title: '下载图片', valueType: 'n' },
                { prop: 'goodsShareTotalCount', title: '合计', valueType: 'n' },
              ]
            },
            { prop: 'goodsShareInviteMemberCount', title: '商品分享注册人数', valueType: 'n' },
            { prop: 'goodsShareCreateOrderCount', title: '商品分享下单人数', valueType: 'n' },
            {
              prop: '', title: '活动分享次数',
              children: [
                { prop: 'activityShareFriendCount', title: '微信好友', valueType: 'n' },
                { prop: 'activityShareCircleCount', title: '朋友圈', valueType: 'n' },
                { prop: 'activityShareTotalCount', title: '合计', valueType: 'n' },
              ]
            },
            { prop: 'activityShareInviteMemberCount', title: '活动分享注册人数', valueType: 'n' },
            { prop: 'petLovingMemberCount', title: '爱宠成员数', valueType: 'n' },
            { prop: 'shareOrderTotalMemberCount', title: '累积下单人数', valueType: 'n' },
            { prop: 'shareOrderTodayMemberCount', title: '当天下单人数', valueType: 'n' },
            { prop: 'shareOrderTodayToRefundMemberCount', title: '当天退单人数', valueType: 'n' },
            { prop: 'shareOrderCount', title: '订单数', valueType: 'n' },
            { prop: 'shareOrderRefundCount', title: '退单数', valueType: 'n' },
            { prop: 'activeMember', title: '活跃人数', valueType: 'n' },
          ],
          dataSource: tB_data,
          fileName: '分享官列表',
        }
        Json2Excel(option)
      }
    })
    this.setState({ exportBtnLoading: false })
  }
  render() {
    const { columns, dataSource, dataSource1, pageData: { pageNo, pageSize }, total, auditColumns, tabValue, searchOption, exportBtnLoading } = this.state
    return (
      <div className='p-layout-box'>
        <TheQueryForm
          ref={(ref) => this.queryFormRef = ref}
          option={searchOption}
          show={true}
          onReset={() => this.onReset()}
          onGetValues={(values) => this.onFormSearch(values)}>
          {
            tabValue === '0' && <TheButton type="default" size="middle" onClick={() => { this.toExport() }} haspermi={['distribution:sharerManagement:export']} loading={exportBtnLoading}>导出</TheButton>
          }

        </TheQueryForm>

        <Tabs activeKey={tabValue} type="card" onChange={this.tabChange}>
          <Tabs.TabPane tab='分享官列表' key='0'>
            <TheTable
              scroll={{ x: "max-content", y: '63vh' }}
              columns={columns}
              dataSource={dataSource}
              rowKey={'memberId'}
              onChange={this.sorterChange}
            />
          </Tabs.TabPane>
          <Tabs.TabPane tab='高级分享官申请列表' key='1'>
            <TheTable
              scroll={{ x: "max-content", y: '63vh' }}
              columns={auditColumns}
              rowKey={'memberId'}
              dataSource={dataSource1}
            />
          </Tabs.TabPane>
        </Tabs>
        <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
        {/* 驳回申请弹窗 */}
        <RejectModal ref={(ref) => this.rejectModalRef = ref} type='sharerList' getRequest={() => { this.getData() }}></RejectModal>
        {/* 下单人数弹窗 */}
        <OrderNumModal ref={(ref) => this.orderNumModalRef = ref}></OrderNumModal>
        {/* 爱宠成员弹窗 */}
        <PetLoverModal ref={(ref) => this.petLoverModalRef = ref }></PetLoverModal>
        {/* 活跃人数弹窗 */}
        <ActivePopulationModal ref={(ref) => this.activePopulationModalRef = ref}></ActivePopulationModal>
      </div>
    )
  }
}